<template>
  <div class="indexDialog" v-if="visible">
    <el-dialog
      title="预警范围设置"
      :visible="visible"
      width="568px"
      @close="$emit('close')"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="110px"
        :inline="true"
        size="normal"
      >
        <div class="title">请您设置或核对预警范围！</div>
        <el-form-item label="开发预警范围" prop="openEarlyWarningRange">
          <el-radio-group v-model="form.openEarlyWarningRange">
            <el-radio
              v-for="item in items_range"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="开放区域"
          prop="openRegion"
          v-if="form.openEarlyWarningRange == 2"
        >
          <Select
            :value.sync="form.openRegion"
            :options="options_level"
            placeholder="请选择层级"
          ></Select>
          <div>对应层级的区域均开放，未开放区域将无法接收到预警信息！</div>
        </el-form-item>
        <el-form-item label="预警规则" prop="modelWarningRule">
          <Select
            :value.sync="form.modelWarningRule"
            :default="form.modelWarningRule"
            :options="options_rule"
            :disabled="true"
            placeholder="请选择预警规则"
          ></Select>
          <div v-if="form.modelWarningRule == 1">
            开放区域内的用户均能对辖区内的预警信息进行跟踪处理！
          </div>
          <div v-if="form.modelWarningRule == 2">
            各区域将会接收到各自的预警信息！
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="footer">
        <div>开启后，请去预警规则配置页激活对应模型规则！</div>
        <div>
          <el-button type="primary" @click="submit">确认开启</el-button>
          <el-button @click="close">取消</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Select from '@/views/components/Select'
export default {
  name: 'indexDialog',
  components: {
    Select
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        openEarlyWarningRange: '',
        openRegion: '',
        modelWarningRule: ''
      },
      items_range: [
        { label: '所有区域', value: 1 },
        { label: '部分区域', value: 2 }
      ],
      options_level: [
        { label: '仅市级区域开放', value: 2 },
        { label: '区县级及以上层级区域开放', value: 3 },
        { label: '镇街级及以上层级区域开放', value: 4 }
      ],
      options_rule: [
        { label: '统一规则', value: 1 },
        { label: '各区域自行设置', value: 2 }
      ],
      rules: {
        openEarlyWarningRange: [
          { required: true, message: '请选择预警范围', trigger: 'change' }
        ],
        openRegion: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],
        modelWarningRule: [
          { required: true, message: '请输入规则', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      this.form = {
        openEarlyWarningRange: '',
        openRegion: '',
        modelWarningRule: this.row.modelWarningRule
      }
    }
  },
  methods: {
    submit() {
      let rf = this.$refs.form
      rf.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.form)
        }
      })
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.indexDialog {
  .el-form {
    // .el-select {
    //   width: 370px;
    // }
    .el-input {
      width: 100%;
    }
    .title {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: left;
      color: #333333;
      line-height: 32px;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .Select {
    width: 370px;
  }
}
</style>